<template>
    <div class="article_details_tail_box outer_shadows">
        <ul class="article_details_tail_preface">
            <li v-for="(item,index) in announcementsDetails" :key="index">
                <img :src="'/img/popUps/'+item.url+'.png'" alt="">{{item.msg}}</li>
        </ul>

        <div style="text-align: center">
            <button class="support_but" @click="support_sub(supportData.statue)" :class="{'support_c':supportData.statue}">
                <img src="/img/detail/square.png" alt="">
                <span>赞({{format.n_format(supportData.num)}})</span>
            </button>
        </div>

    </div>
</template>
<!--文章底部-->
<script setup>
import format from "@/config/methods/digital.js"
import {onMounted, reactive, ref, watch, watchEffect} from "vue";
import store from "@/store/index.js";
import api from "@/request/index.js";
import router from "@/router/index.js";
//自定义事件
const emit = defineEmits(['modify_status'])


//父组件传递的文章是点赞信息
const supportData = defineProps({
    num:{ //点赞数
        type:Number,
        default: 0
    },
    statue:{ //点赞状态
        type:Boolean,
        default:false,
    }
})


//文章详情公告内容列表
const announcementsDetails = ref([
    {msg:"如果您喜欢本站，请登录注册成为我们的用户以获得更好体验",url:"normal"},
    {msg:"请您切勿相信本站的任何外部非法链接广告",url:"error"},
    {msg:"切勿相信本站已任何形式向您索要您的身份信息",url:"warn"}
]);


// 点赞操作处理
const support_sub = (item)=>{
    if(!store.state.user){
        store.commit('info_sub',{msg:'请先登录！',type:'warn'})
        return;
    }
    //点赞操作成功处理逻辑
    store.commit('info_sub',{msg:'操作成功',type:'normal'})
    emit('modify_status',!item);
};





</script>

<style scoped>
.article_details_tail_box {
    width: 100%;
    height: 210px;
    padding: 20px;

}

.article_details_tail_preface {
    list-style: none;
    font-size: 14px;

}

.article_details_tail_preface li {
    margin: 10px;
    display: flex;
    align-items: center;
}
.article_details_tail_preface li img{
    width: 12px;
    height: 12px;
    margin-right: 3px;
    margin-top: 3px;
}

.support_but {
    min-width: 100px;
    height: 35px;
    border-radius: 3px;
    padding: 0 5px;
    font-size: 18px;
    color: #6da6e1;
    background: white;
    outline: none;
    transition: all .2s;
    border: 1px solid #6da6e1;
    margin: 30px auto;
    display: flex;
    align-items: center;
}

.support_but:hover {
    color: white;
    background: #6da6e1;
    cursor: pointer;
}
.support_c{
    color: white;
    background: #6da6e1;
    cursor: pointer;
}

.support_but img {
    width: 20px;
}

.support_but span {
    margin: 0 3px;
    font-size: 17px;
}
</style>